<template>
    <div class="content">
        <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="80px" class="demo-ruleForm">
            <p style="font-size:20px;padding-left: 40px;text-align:center;">用户注册</p>
            <el-form-item label="用户名" prop="name">
                <el-input placeholder="请用邮箱作为账户" v-model="registerForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="password" v-model="registerForm.checkPassword" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择类别">
                <el-select v-model="type" placeholder="请选择账号类别">
                    <el-option label="学员账号" value="0"></el-option>
                    <el-option label="猎头账号" value="1"></el-option>
                </el-select>
    
            </el-form-item>
            <el-form-item v-show="type=='0'" label="微信扫描二维码绑定">
                <img v-if="qrUrl!=''" :src="qrUrl" alt="" style="height:160px;weight:160px;float:left;">
                <div style="float:left;padding:10px 40px;">
                    <h3 style="margin:0px;">微信绑定状态</h3>
                    <p v-if="registerForm.openid==''" style="color:red;margin:0px;font-size:1.1rem;">× 未绑定</p>
                    <p v-if="registerForm.openid!=''" style="color:green;margin:0px;font-size:1.1rem;">√ 已绑定</p>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:30%;" :loading="isSaveRegister" @click.native.prevent="saveRegister">
                    确定
                </el-button>
                <el-button style="width:30%;">
                    取消
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    watch: {
        type: function (newValue, oldValue) {
            let vm = this;
            if (vm.type == 0 && vm.qrUrl == '') {
                vm.getQrUrl();
            }
        },
        qrUrl: function (newValue, oldValue) {
            console.log("qrUrl change")
            if (newValue.length != 0) {
                // todo 循环获取openid,直到获取成功
                this.getOpenid();
            }
        }
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));

            } if (!/.{6,15}/.test(value)) {
                callback(new Error('密码为6-15位'));
            } else {
                //如果有输入密码，检验跟第二个重复密码是否一样
                if (this.registerForm.checkPassword !== '') {
                    this.$refs.registerForm.validateField('checkPassword');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            isSaveRegister: false,
            qrUrl: '',
            scene_str: '',
            type: '',
            registerForm: {
                name: '',
                password: '',
                checkPassword: '',
                type: '',
                openid: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入邮箱作为用户名', trigger: 'blur' },
                    { type: 'email', message: "请输入合法的邮箱作为邮箱", trigger: 'blur' }
                ],
                password: [
                    { required: true, validator: validatePass, trigger: 'blur' }
                ],
                checkPassword: [
                    { required: true, validator: validatePass2, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        saveRegister() {
            let vm = this;

            vm.$refs['registerForm'].validate((valid) => {
                //通过验证
                if (valid) {
                    if (vm.type == 0 && vm.registerForm.openid == '') {
                        vm.$message({
                            type: 'error',
                            message: '学员身份必须关联微信！'
                        });
                        return;
                    }

                    let params = {};
                    params.openid = vm.registerForm.openid;
                    params.name = vm.registerForm.name;
                    params.password = vm.registerForm.password;
                    params.type = vm.type;
                    console.log(params)
                    vm.isSaveRegister = true;
                    vm.axios.post(vm.url.acid + "&do=SavePtRegister", params,{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
                    .then(function (res) {
                        console.log(res)
                        if (res.data.status == 'success') {
                            vm.$message({
                                type: 'success',
                                message: '注册成功'
                            });

                            vm.$alert("注册成功！", "注册信息", {
                                confirmButtonText: "前往登陆",
                                callback: function () {
                                    // 这里是回调函数，因为作为一个组件，是个个地方都通用的，只是提供外部访问接口
                                    vm.$router.push({ path: '/login' })
                                }
                            });
                        } else {
                            vm.$message({
                                type: 'error',
                                message: res.data.msg
                            });
                        }
                        vm.isSaveRegister = false;
                    }).catch(function (res) {
                        vm.isSaveRegister = false;
                    })


                } else {
                    console.log('error submit!!');
                    vm.isSaveRegister = false;
                    return false;
                }
            });
        },
        getOpenid() {
            let vm = this;
            console.log(vm.registerForm.openid)
            if (vm.registerForm.openid != '') return;
            vm.axios.post(vm.url.acid + "&do=GetOpenidbySceneStr&scene_str=" + vm.scene_str).then(function (res) {
                console.log(res)
                if (res.data.status == 'success') {
                    vm.registerForm.openid = res.data.openid;
                    // vm.scene_str=res.data.data.scene_str;
                } else {
                    vm.getOpenid();
                }
            }).catch(function (res) {
                vm.getOpenid();
            })
        },
        getQrUrl() {
            console.log(this);
            console.log("getQrUrl")
            let vm = this;
            if (vm.qrUrl != '' && vm.scene_str != '') return;
            vm.axios.post(vm.url.acid + "&do=ptregisterqr").then(function (res) {

                if (res.data.status == 'success') {
                    vm.qrUrl = res.data.data.qr_url;
                    vm.scene_str = res.data.data.scene_str;
                } else {
                    vm.getQrUrl();
                }
            }).catch(function (res) {
                vm.getQrUrl();
            })
        }
    }

}
</script>

<style scoped>
.content {
    max-width: 480px;
    margin: 100px auto;
    padding: 30px;
    /* border-radius: 10px; */
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
</style>
